<template>
    <div class="container roundy-5 border-1 border-skyblue" :class="getColorByType(isLabel=true)">
        <table>
            <thead>
                <tr height="60">
                    <th width="80">对手属性</th>
                    <!-- <th>作为攻击方时</th> -->
                    <th>作为防守方时</th>
                </tr>
            </thead>
            <tbody class="text-center bg-white">
                <tr v-for="(t, index) of typeOrder" :key="index" height="30">
                    <td class="text-white" :class="getColorByType(false ,t)">
                        {{t}}
                    </td>
                    <!-- <td :class="{'font-bold': atkerRate[index]!=1}">{{atkerRate[index]}}x</td> -->
                    <td :class="{'font-bold': defenderRate[index]!=1, 'bg-green': defenderRate[index]<1,
                    'bg-red': defenderRate[index]>1}">
                        {{defenderRate[index]}}x
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr height="50">
                    <td colspan="2" class="font-bold font-size-15 text-center tips">
                        宝可梦特性效果不计算在内,请自行考虑。
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
export default {
    name: "TypeRelationCard",
    props: ['pokemon', 'getColorByType'],
    data(){
        return{
            typeOrder: ['一般', '格斗', '飞行', '毒', '地面', 
            '岩石', '虫', '幽灵', '钢', '火', '水', '草', '电',
            '超能力', '冰', '龙', '恶', '妖精'],  //属性顺序
            typeRelation: [     //二维数组 横纵坐标按typeOrder的顺序排列各个宝可梦属性 数值为伤害倍率
                [1, 1, 1, 1, 1, .5, 1, 0, .5, 1, 1, 1, 1, 1, 1, 1, 1, 1],
                [2, 1, .5, .5, 1, 2, .5, 0, 2, 1, 1, 1, 1, .5, 2, 1, 2, .5],
                [1, 2, 1, 1, 1, .5, 2, 1, .5, 1, 1, 2, .5, 1, 1, 1, 1, 1],
                [1, 1, 1, .5, .5, .5, 1, .5, 0, 1, 1, 2, 1, 1, 1, 1, 1, 2],
                [1, 1, 0, 2, 1, 2, .5, 1, 2, 2, 1, .5, 2, 1, 1, 1, 1, 1],
                [1, .5, 2, 1, .5, 1, 2, 1, .5, 2, 1, 1, 1, 1, 2, 1, 1, 1],
                [1, .5, .5, .5, 1, 1, 1, .5, .5, .5, 1, 2, 1, 2, 1, 1, 2, .5],
                [0, 1, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, .5, 1],
                [1, 1, 1, 1, 1, 2, 1, 1, .5, .5, .5, 1, .5, 1, 2, 1, 1, 2],
                [1, 1, 1, 1, 1, .5, 2, 1, 2, .5, .5, 2, 1, 1, 2, .5, 1, 1],
                [1, 1, 1, 1, 2, 2, 1, 1, 1, 2, .5, .5, 1, 1, 1, .5, 1, 1],
                [1, 1, .5, .5, 2, 2, .5, 1, .5, .5, 2, .5, 1, 1, 1, .5, 1, 1],
                [1, 1, 2, 1, 0, 1, 1, 1, 1, 1, 2, .5, .5, 1, 1, .5, 1, 1],
                [1, 2, 1, 2, 1, 1, 1, 1, .5, 1, 1, 1, 1, .5, 1, 1, 0, 1],
                [1, 1, 2, 1, 2, 1, 1, 1, .5, .5, .5, 2, 1, 1, .5, 2, 1, 1],
                [1, 1, 1, 1, 1, 1, 1, 1, .5, 1, 1, 1, 1, 1, 1, 2, 1, 0],
                [1, .5, 1, 1, 1, 1, 1, 2, 1, 1, 1, 1, 1, 2, 1, 1, .5, .5],
                [1, 2, 1, .5, 1, 1, 1, 1, .5, .5, 1, 1, 1, 1, 1, 2, 2, 1],
            ],
            atkerRate: [],  //作为攻击方的倍率
            defenderRate: [],  //作为防守方的倍率
        }
    },
    methods:{
        /* 计算各属性之间的伤害倍率 */
        getRateOfType(isAtker){
            let type1 = [];

            if(isAtker){
                type1 = this.typeRelation[this.typeOrder.indexOf(this.pokemon.type1)];
                
                //判断该宝可梦是否只有单一属性
                if(this.pokemon.type2){
                    let type2 = this.typeRelation[this.typeOrder.indexOf(this.pokemon.type2)];
                    this.atkerRate = this.multiplyArrays(type1, type2);
                }
                else{
                    this.atkerRate = type1;
                }
            }
            else{
                type1 = this.typeRelation.map((t) => {
                    return t[this.typeOrder.indexOf(this.pokemon.type1)];
                });

                //判断该宝可梦是否只有单一属性
                if(this.pokemon.type2){
                    let type2 = this.typeRelation.map((t) => {
                        return t[this.typeOrder.indexOf(this.pokemon.type2)];
                    });
                    this.defenderRate = this.multiplyArrays(type1, type2);
                }
                else{
                    this.defenderRate = type1;
                }
            }
                
        },

        /* 计算两个数组相乘的结果，各位置数值相乘得到结果 */
        multiplyArrays(a, b){
            let c = [];
            for(var i = 0; i <= a.length; i++){
                c.push(a[i] * b[i]);
            }
            return c;
        }
    },
    mounted(){
        this.getRateOfType(true)
        this.getRateOfType(false)
    }
}
</script>

<style lang="less" scoped>
.container {
    max-width: 600px;
}

table {
    border-collapse: collapse;
    width: 100%;
}

tr {
    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

td {
    border-left: 1px solid rgba(0, 0, 0, 0.2);
}

@media screen and (min-width: 600px) {
    .container {
        margin-left: auto;
        margin-right: auto;
    }
}
</style>